{% extends "base.html"%}
 {% block head %}
    <div class="template">
  <div class="box">
{#    <h3>#}
{#      <p><span>个人博客</span>苹果的博客</p>#}
{#    </h3>#}

  </div>
</div>
     <style>
.divcss5{ border:1px dashed #a09ba2; width:1000px}
     .article_info .title {
    margin-bottom: 20px;
}

#div_digg {
    {#float: right;#}
    margin-bottom: 10px;
    margin-right: 30px;
    font-size: 12px;
    width: 125px;
    text-align: center;
    margin-top: 10px;
}

/* 推荐 */
.diggit {
    float: left;
    width: 46px;
    height: 52px;
    background: url('/static/font/upup.gif') no-repeat;
    text-align: center;
    cursor: pointer;
    margin-top: 2px;
    padding-top: 5px;
}

/* 反对 */
.buryit {
    float: right;
    margin-left: 20px;
    width: 46px;
    height: 52px;
    background: url('/static/font/downdown.gif') no-repeat;
    text-align: center;
    cursor: pointer;
    margin-top: 2px;
    padding-top: 5px;
}

.clear {
    clear: both;  /* 清除浮动，解决塌陷问题 */
}
</style>
<article>

<div class="center">
{%csrf_token%}
<article>
<div class="divcss5">
       <a href="#"><p><font color="#5d6c7d"><h4 class="title" hid="{{ text.hid }}">{{ text.title }}</h4></font></p></a>
    <div class="postbody">
    <p class="postfoot" title="permalink"><font color="#191619">{{ text.detail|safe}}</font></p>
</div><br>
</div>
{# 文章点赞 #}
{% csrf_token %}
    <div id="div_digg">
{#         推荐#}
        <div class="diggit action">
            <span class="diggnum" id="digg_count">{{ text.like_count }}</span>
        </div>
{#         点灭#}
        <div class="buryit action">
            <span class="diggnum" id="bury_count">{{ text.unlike_count }}</span>
        </div>
        <div class="clear"></div>
        <div class="diggword" id="digg_tips" style="color: red;"></div>
    </div>
<div>
    <script type="text/javascript"  src="/static/js/jquery/jquery.min.js"></script>
    <script>
            var hid = $('.title').attr('hid')
            $('.action').click(function () {
                var $index = $(this).index()
                var isUp = $index ? false : true
               $.ajax({
                   url: '/digg/',
                   type: 'post',
                   dataType: 'json',
                   data: {
                       'is_up': isUp,
                       'hid': hid
                   },
                   {#success(res) {#}
                   {#    console.log(res)#}
                   success:function (res) {
                     console.log(res);
                     if (res.state){
                         if (isUp){
                             var val = parseInt($("#digg_count").text());
                             $("#digg_count").text(val+1);
                         }else{
                             var val = parseInt($("#bury_count").text());
                             $("#bury_count").text(val+1);
                         }

                     }else {
                         if (res.handled){
                             $("#digg_tips").html('您已点过赞')
                         }else{
                             $("#digg_tips").html('您已点反对')
                         }
                         setTimeout(function () {
                             $("#digg_tips").html('')

                         },1500)
                     }

                   },
               })
            })
    </script>

{#    # 评论功能#}
    <form action="/comment/post_comment/{{ hid }}/" method="post">
        {% csrf_token %}
        <div class="form-group">
            <label for="body">
                <strong>
                    评论：
                </strong>
            </label>
            <textarea
                type="'text"
                class="form-control"
                id="id"
                name="body"
                rows="2"></textarea>
        </div>
        <button type="submit" class="btn btn-primary"> 发送</button>
    </form>

</div>
    <h4>共有{{ comments.count }}条评论</h4>
    <div>
        {% for comment in comments %}
            <hr>
            <p>
                <strong style="color: pink">
                   游客（{{ comment.user_ip }}）
                </strong> 于
                <span style="color: green">
                    {{ comment.created|date:"Y-m-d H:i:s" }}
                </span> 评论：
            </p>
            <pre style="font-family: inherit; font-size: 1em;">{{ comment.body }}</pre>
            <a href="/comment/del_comment/{{ comment.id }}/{{ comment.hid }}/"><span><font color="#458ba2">删除评论</font></span></a>
        {% endfor %}
    </div>

</article>
<script type="text/javascript"  src="/static/js/silder.js"></script>
<head>
    <meta charset="UTF-8">
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous">
    </script>

</head>
<body>


{% endblock %}






